<template>
  <div class="orderpl">
    <ContentBox title="评价" @right="shoppl" :fixed="true" titlecolor="#000000">
      <template slot="oleft"><van-icon color="#000000" name="arrow-left"/></template>
      <template slot="oright">提交</template>
    </ContentBox>
    <div>
      <van-field v-model="comment" placeholder="请输入你的评价..." rows="4" type="textarea" autosize :clearable="true" :show-word-limit="true" maxlength="250"/>
      <van-cell title="商品评分">
        <van-rate slot="default" v-model="product_score" allow-half void-icon="star" color="#FF2A1F"/>
      </van-cell>
      <van-cell title="物流评分">
        <van-rate slot="default" v-model="express_score" allow-half void-icon="star" color="#FF2A1F"/>
      </van-cell>
      <van-cell title="服务评分">
        <van-rate slot="default" v-model="service_score" allow-half void-icon="star" color="#FF2A1F"/>
      </van-cell>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      comment: '',
      product_score: 0,
      express_score: 0,
      service_score: 0
    }
  },
  methods: {
    shoppl () {
      if (this.comment === '') {
        this.$toast('请填写评价内容')
        return false
      }
      if (this.product_score === 0 || this.express_score === 0 || this.service_score === 0) {
        this.$toast('评分最低为半颗星')
        return false
      }
      this.$axios.post('/api/order/comment', {
        unique: this.$route.params.unique,
        pics: '',
        comment: this.comment,
        express_score: this.express_score,
        product_score: this.product_score,
        service_score: this.service_score
      }).then(res => {
        if (res.status === 200) {
          this.$toast('评价成功')
          this.$router.replace('/shopOrder?showView=5')
        } else {
          this.$tosat(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.orderpl{
  height: 100%;
  background: #f0f0f0;
  padding-top: .88rem;
}
</style>
